import React, { memo, useEffect, useRef, useState } from "react";

import { useDispatch, useSelector, shallowEqual } from "react-redux";

import { getAlbumNewestAction } from "../../store/actionType";

import { albumAction } from "../../../../../../pages/albumPage/store/actionType";

import { getSongDetailsMessage } from "@/pages/player/store/actionType";

import { getSizeImage } from "@/utils/format-utils";

import HotRecommendT from "@/components/recommendTitle";
import { AlbumWrap } from "./style";

import { Carousel } from "antd";
import { NavLink } from "react-router-dom";
import classNames from "classnames";

export default memo(function AlbumBanner() {
  const carouselRef = useRef();
  const dispatch = useDispatch();

  const { albumNewestInfo, album } = useSelector(
    (state) => ({
      albumNewestInfo: state.getIn(["recommend", "albumNewestInfo"]),
      album: state.getIn(["albumPage", "albums"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    dispatch(getAlbumNewestAction());
  }, [dispatch]);

  const playAlbum = (id) => {
    dispatch(albumAction(id));
  };

  // (album)
  const songid = album.length != 0 ? album.songs[0].id : "";

  useEffect(() => {
    if (songid) {
      dispatch(getSongDetailsMessage(songid));
    }
  }, [dispatch, songid]);

  return (
    <div>
      <HotRecommendT copywriter="新碟上架" />
      <AlbumWrap>
        <i
          onClick={(e) => carouselRef.current.prev()}
          className="carLeft radio_slide"
        ></i>
        <i
          onClick={(e) => carouselRef.current.next()}
          className="carRight radio_slide"
        ></i>
        <Carousel ref={carouselRef}>
          <div className="album-banner">
            <ul>
              {albumNewestInfo.slice(0, 5).map((item, index) => {
                return (
                  <li className="album-banner-bgi" key={item.commentThreadId}>
                    <div className="blurBg sprite_covor">
                      <div className="blurPicUrl">
                        <NavLink
                          to={{
                            pathname: "/album",
                            search: "?id=" + item.id,
                          }}
                        >
                          <img
                            src={getSizeImage(item.blurPicUrl, 100)}
                            alt=""
                          />
                          <div className="b-hov sprite_covor"></div>
                        </NavLink>
                        <i
                          onClick={(e) => playAlbum(item.id)}
                          className="iconPlay"
                        ></i>
                      </div>
                      <NavLink
                        to={{
                          pathname: "/album",
                          search: "?id=" + item.id,
                        }}
                        className="art-song"
                      >
                        {item.name}
                      </NavLink>
                      <NavLink
                        to={{
                          pathname: "/artist",
                          search: "?id=" + item.artist.id,
                        }}
                        className="art-name"
                      >
                        {item.artists[0].name}
                      </NavLink>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="album-banner">
            <ul>
              {albumNewestInfo.slice(5, 10).map((item, index) => {
                return (
                  <li className="album-banner-bgi" key={item.commentThreadId}>
                    <div className="blurBg">
                      <div className="blurPicUrl">
                        <NavLink
                          to={{
                            pathname: "/album",
                            search: "?id=" + item.id,
                          }}
                        >
                          <img
                            src={getSizeImage(item.blurPicUrl, 100)}
                            alt=""
                          />
                          <div className="b-hov"></div>
                        </NavLink>
                        <i
                          onClick={(e) => playAlbum(item.id)}
                          className="iconPlay"
                        ></i>
                      </div>
                      <NavLink
                        to={{
                          pathname: "/album",
                          search: "?id=" + item.id,
                        }}
                        className="art-song"
                      >
                        {item.name}
                      </NavLink>
                      <NavLink
                        to={{
                          pathname: "/artist",
                          search: "?id=" + item.artist.id,
                        }}
                        className="art-name"
                      >
                        {item.artists[0].name}
                      </NavLink>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
        </Carousel>
      </AlbumWrap>
    </div>
  );
});
